<template>
  <div>

    <div class="flex">
      <div class="left-content">
        <b-card title="扫描数据统计表">
          <template #title>
            <span>右边内容</span>
          </template>
          <template #content>
            <div style="height: 350px;">
              <BECharts :options="chartOptions"></BECharts>
            </div>
          </template>
        </b-card>

        <div class="content-b">
          <b-card title="今日员工报表" class="b-card">

          </b-card>
          <b-card title="到件预报" class="b-card">

          </b-card>
        </div>
      </div>
      <div class="right-content">
        <b-card title="财务报表">
          <template #content>
            <div style="height: 350px;">
              <BECharts :options="CWOptions"></BECharts>
            </div>
          </template>
        </b-card>
      </div>
    </div>

  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import BCard from '@/components/BCard.vue';
import BECharts from '@/components/BECharts.vue';

const CWOptions = ref({
  tooltip: {
    trigger: 'item'
  },
  legend: {
    bottom: '0',
    left: 'center'
  },
  graphic: [
    {
      type: 'text',
      left: 'center',
      top: 'center',
      z: 2,
      style: {
        text: '0.00',
        textAlign: 'center',
        fill: '#000',
        fontSize: 36,
        fontWeight: 'bold'
      }
    },
    {
      type: 'text',
      left: 'center',
      top: '56%',
      z: 2,
      style: {
        text: '总金额（元）',
        textAlign: 'center',
        fill: '#999',
        fontSize: 12,
      }
    },
  ],
  series: [
    {
      type: 'pie',
      radius: ['50%', '70%'],
      avoidLabelOverlap: false,
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: false,
          fontSize: 40,
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: [
        { value: 1048, name: '寄付', itemStyle: { color: 'rgb(54,133,255)' } },
        { value: 735, name: '到付', itemStyle: { color: 'rgb(79,48,255)' } },
        { value: 580, name: '在线支付', itemStyle: { color: 'rgb(48,237,203)' } },
        { value: 484, name: '月结', itemStyle: { color: 'rgb(30,222,248)' } },
      ]
    }
  ]
})

const chartOptions = ref({
  xAxis: {
    type: 'category',
    data: ['08-01', '08-02', '08-03', '08-04', '08-05', '08-06'],
    axisLabel: {
      fontSize: 12, // 修改字体大小
      color: '#999' // 修改字体颜色
    },
    axisTick: {
      show: false // 隐藏 x 轴的刻度
    }
  },
  yAxis: {
  },
  tooltip: {
    trigger: "axis",
  },
  series: [
    {
      name: '订单量',
      data: [0, 0, 0, 934, 1290, 1330, 1320],
      type: 'line',
      smooth: true,
      itemStyle: { color: 'rgb(30,222,248)' }
    },
    {
      data: [0, 0, 0, 934, 0, 0, 0],
      type: 'line',
      smooth: true,
      name: '订单量2',
      itemStyle: { color: 'rgb(255,201,63)' }
    }
  ]
});
</script>

<style scoped lang='scss'>
.left-content {
  flex: 1;

  .content-b {
    display: flex;
    margin-top: 20px;

    .b-card {
      flex: 1;
      margin-right: 20px;

      &:last-child {
        margin-right: 0;
      }
    }
  }
}

.right-content {
  width: 30%;
  margin-left: 20px;
}
</style>
